<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">

    <title>猜数游戏</title>

    <style>
      html {
        font-family: sans-serif;
      }

      body {
        width: 50%;
        max-width: 800px;
        min-width: 480px;
        margin: 0 auto;
      }
      
      .form input[type="number"] {
        width: 200px;
      }

      .lastResult {
        color: white;
        padding: 3px;
      }
    </style>
  </head>

  <body>
    <h1>猜数游戏</h1>

    <p>这里生成了一个1-100之间的随机数。看看你能否在十次以内猜出这个数字</p>

    <div class="form">
      <label for="guessField">Enter a guess: </label>
      <input type="number" min="1" max="100" required id="guessField" class="guessField">
      <input type="submit" value="Submit guess" class="guessSubmit">
    </div>

    <div class="resultParas">
      <p class="guesses"></p>
      <p class="lastResult"></p>
      <p class="lowOrHi"></p>
    </div>

    <script>
      // 生成随机数
      let randomNumber = Math.floor(Math.random() * 100) + 1;

      const guesses = document.querySelector(".guesses");
      const lastResult = document.querySelector(".lastResult");
      const lowOrHi = document.querySelector(".lowOrHi");

      const guessSubmit = document.querySelector(".guessSubmit");
      const guessField = document.querySelector(".guessField");

      let guessCount = 1;
      let resetButton;
      
      function checkGuess() {
        // 声明一个常量，储存用户输入的数字
        const userGuess = Number(guessField.value);
        if (guessCount === 1) {
          guesses.textContent = "你猜的是:";
        }
        guesses.textContent += ` ${userGuess}`;

        if (userGuess === randomNumber) {
          lastResult.textContent = "恭喜你猜对了！"

          // 显示绿色样式的祝贺信息
          lastResult.style.backgroundColor = "green";

          // 清除高或低提示框
          lowOrHi.textContent = "";
          setGameOver();
        } else if (guessCount === 10) {
          lastResult.textContent = "游戏结束，你没能在特定次数内猜中"
          lowOrHi.textContent = "";
          setGameOver();
        } else {
          lastResult.textContent = "猜错了，再试一次吧！"
          lastResult.style.backgroundColor = "red";
          if (userGuess < randomNumber) {
            lowOrHi.textContent = "你猜的数字太小了！";
          } else if (userGuess > randomNumber) {
            lowOrHi.textContent = "你猜的数字太大了！";
          }
        }

        // 自增符号
        guessCount++;
        // 把表单中 文本域的值清空
        guessField.value = "";
        guessField.focus();
      }

      function setGameOver() {
        // 禁用表单
        guessField.disabled = true;
        guessSubmit.disabled = true;
        resetButton = document.createElement("button");
        resetButton.textContent = "重新开始";
        document.body.append(resetButton)
        // 事件监听器
        resetButton.addEventListener("click", resetGame)
      }

      function resetGame() {
        guessCount = 1;

        const resetParas = document.querySelectorAll(".resultParas p");
        for (const resetPara of resetParas) {
          resetPara.textContent = "";
        }

        resetButton.parentNode.removeChild(resetButton);

        guessField.disabled = false;
        guessSubmit.disabled = false;
        guessField.value = "";
        guessField.focus();

        lastResult.style.backgroundColor = "white";

        randomNumber = Math.floor(Math.random() * 100) + 1;
      }

      // 事件监听器
      guessSubmit.addEventListener("click", checkGuess);


    </script>
  </body>
</html>